import React, { useState,ChangeEvent } from 'react';
// 图标
// import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons'
import Button from './components/Button/button';
import Menu from './components/Menu/menu';
import MenuItem from './components/Menu/menuItem';
import SubMenu from './components/Menu/subMenu';
import Transition from './components/Transition/transition'
import Input from './components/Input/input'
import AutoComplete, {DataSourceType} from './components/AutoComplete/autoComplete'
import Icon from './components/Icon/icon'
import Upload, {UploadFile} from './components/Upload/upload'

library.add(fas)

const ControlledInput = () => {
  const [value, setValue] = useState('')
  return <Input value={value} defaultValue={value} onChange ={(e: ChangeEvent<HTMLInputElement>) => {setValue(e.target.value)}}/>
}
const App: React.FC = () => {
  const [show, setShow] = useState(false)
  const handleFetch = (query: string) => {
    return fetch(`https://api.github.com/search/users?q=${query}`)
      .then(res => res.json())
      .then(({ items }) => {
        console.log(items)
        if(items) {
          return items.slice(0, 10).map((item: any) => ({ value: item.login, ...item}))
        }
        return []
      })
  }
  const onSelect = (e: DataSourceType) => {
    console.log(e)
  }
  const onChange = (file: File) => {
    console.log('onChange',file)
  }
  const onRemove = (file: UploadFile) => {
    console.log('onRemove',file)
  }
  const onProgress = (percentage: number, file: File) => {
    console.log('速度：',percentage,'文件：',file)
  }
  return (
    <div className="App" >
      <header className="App-header">

        {/* <FontAwesomeIcon icon={faCoffee} size="10x"></FontAwesomeIcon> */}
        {/* <img src={logo} className="App-logo" alt="logo" /> */}
        <h1>-----Button-----</h1>
        <Button>hello</Button>
        <Button disabled>disabled Button</Button>
        
        <Button btnType='primary' size='lg' >Large Primary</Button>
        <Button btnType='danger' size='sm' >Small Danger</Button>
        <Button btnType='link' size='sm' href="http://www.baidu.com"> Small Link</Button>
        <Button disabled btnType='link' size='sm' href="http://www.baidu.com"> Small Link Disabled</Button>
        <h1>-----Menu-----</h1>
        <Menu defaultIndex={'0'} onSelect={(index) => {alert(index)}}>
          <MenuItem>
            cool link 1
          </MenuItem>
          <MenuItem disabled>
            cool link 2
          </MenuItem>
          {/* -----subMenu----- */}
          <SubMenu title='dropdown'>
            <MenuItem>
              cool link 1
            </MenuItem>
            <MenuItem >
              cool link 2
            </MenuItem>
            <MenuItem>
              cool link 3
            </MenuItem>
          </SubMenu>
          <MenuItem>
            cool link 3
          </MenuItem>
        </Menu>

        <Menu defaultIndex={'0'} onSelect={(index) => {alert(index)}} mode='vertical' defaultOpenSubMenus={['2']}>
          <MenuItem index={'0'}>
            cool link 1
          </MenuItem>
          <MenuItem index={'1'} disabled>
            cool link 2
          </MenuItem>
          {/* -----subMenu----- */}
          <SubMenu title='dropdown'>
            <MenuItem>
              cool link 1
            </MenuItem>
            <MenuItem >
              cool link 2
            </MenuItem>
            <MenuItem>
              cool link 3
            </MenuItem>
          </SubMenu>
          <MenuItem index={'2'}>
            cool link 3
          </MenuItem>
        </Menu>

        <h1>-----Transition动画组件-----</h1>
        <Button size='lg' onClick={() => {setShow(!show)}} >Toggle</Button>
        <Transition 
          in={show}
          timeout={300}
          animation='zoom-in-top'
        >
          <div>
            <p>edit <code>src/app.tsx</code>and save to reload</p>
            <p>edit <code>src/app.tsx</code>and save to reload</p>
            <p>edit <code>src/app.tsx</code>and save to reload</p>
            <p>edit <code>src/app.tsx</code>and save to reload</p>
            <p>edit <code>src/app.tsx</code>and save to reload</p>
            <p>edit <code>src/app.tsx</code>and save to reload</p>
            <p>edit <code>src/app.tsx</code>and save to reload</p>
            <p>edit <code>src/app.tsx</code>and save to reload</p>
          </div>
        </Transition>
        <Transition 
          in={show}
          timeout={300}
          animation='zoom-in-top'
          wrapper={true}
        >
          <Button btnType='primary' size='lg'>ALarge Button</Button>
        </Transition>

        <h1>-----输入框-----</h1>
        <Input
          style={{width: '300px'}}
          placeholder="请输入"
        />
        <AutoComplete 
          fetchSuggestions={handleFetch}
          onSelect={onSelect}
          //renderOption={renderOption}
        />
        <>
        <Input
          style={{width: '300px'}}
          placeholder="placeholder"
        />
        <ControlledInput />
        </>
        <h1>-----上传文件-----</h1>
        <Upload
          action="api/single1"
          onChange={onChange}
          onRemove={onRemove}
          onProgress={onProgress}
          name="fileName"
          multiple
          drag
        >
          <Icon icon="upload" size="5x" theme="secondary" />
          <br/>
          <p>Drag file over to upload</p>
        </Upload>
     
      </header>
    </div>
  );
}

export default App;
